<!-- Created by mhy on 2018/6/24.

 -->
<template>
  <div class="navBar">
    <div class="nav-content">
      <div class="nav-left">
        <img class="nav-logo" src="../../../static/logo_60px.png" @click="gotoHomePage">
        <p class="nav-manage-title">装裱大师·管理后台</p>
        <img class="nav-manage-guide" v-if="showBackBtn" src="http://test.51artx.com/dist/static/back.png" @click="goback">
      </div>
      <div class="nav-center">
        <p style="font-size: 16px;">{{navTitle}}</p>
      </div>
      <div class="nav-right" @click="logout">
        <img class="nav-userimg" :src="userinforesult.usericon || '../../assets/logo_60px.png'">
        <div class="nav-user-info">
          <p class="nav-user-name" v-if="userinforesult">{{userinforesult.username || '无用户名'}}</p>
          <p class="nav-user-type" v-if="userinforesult">{{userinforesult.duty || '无职责'}}</p>
        </div>
        <p>▾</p>
      </div>
    </div>

  </div>
</template>

<script>
  import {mapState} from 'vuex'
  export default {
    data() {
        return{
          pageTitle: '',
          userName:  '用户名',
          userType: '权限'
        }
    },
    computed: {
      ...mapState({
        navTitle: state => state.navTitle,
        userinforesult: state => state.login.userinforesult || {}
      }),
      showBackBtn (){
          return this.$route.path != '/homepage'
      }
    },
    methods: {
      gotoHomePage(){
//          this.$router
          this.$router.replace('/homepage')
//          this.$router.go(-10086)
      },
      goback(){
        this.$router.go(-1)
      },
      logout(){
        this.$store.state.showLogout = true
      }
    },
    watch: {

    }
  }


</script>

<style scoped>


  .navBar{
    width: 100%;
    height: 80px;
    margin: 0;
    box-shadow: 0pt 0.1px 0px #000000;
    position: relative;
    background-color: white;
  }
  /*导航栏主体*/
  .nav-content{
    width: 100%;
    position: absolute;
    top: 50%; transform: translateY(-50%);
    display: flex;
    display: -webkit-flex;
    justify-content: space-between;
    align-items: center;
  }
  /*左边*/
  .nav-left{
    display: flex;
    display: -webkit-flex;
    height: 40px;
    margin-left: 20px;
    align-items: center;
    width: 200px;
  }
  .nav-logo{
    width: 30px;
    height: 30px;
    margin-left: 20px;
    border-radius: 15px;
  }
  .nav-manage-title{
    font-size: 20px;
    color: #303641;
    margin-left: 10px;
  }
  .nav-manage-guide{
    width: 30px;
    height: 30px;
    /*border: 1px solid #C8C7CC;*/
    margin-left: 30px;
    padding: 4px;
  }
  /*中间*/

  /*右边*/
  .nav-right{
    width: 200px;
    display: flex;
    display: -webkit-flex;
    align-items: center;
    margin-right: 20px;
    justify-content: flex-end;
  }
  .nav-userimg{
    width: 30px;
    height: 30px;
    border-radius: 15px;
  }
  .nav-user-name{
    font-size: 14px;
    color: #303641;
    margin: 0;
    text-align: left;
  }
  .nav-user-type{
    font-size: 12px;
    color: #7F303641;
    margin: 0;
    text-align: left;
  }
  .nav-user-info{
    display: flex;
    display: -webkit-flex;
    flex-direction: column;
    height: 40px;
    justify-content: center;
    margin-left: 10px;
    margin-right: 10px;
  }
</style>
